<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电影电视剧购物平台</title>
<style>
/* 全局重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基础页面样式 */
body {
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 14px;
    background: #000;
    color: #333;
    position: relative;
}

/* 图片样式 */
img {
    border: none;
    max-width: 100%;
}

/* 链接样式 */
a {
    cursor: pointer;
    color: #333;
    text-decoration: none;
    outline: none;
}

/* 列表样式 */
ul {
    list-style-type: none;
}

/* 强调文本样式 */
em {
    font-style: normal;
}

/* 浮动类 */
.lt {
    float: left;
}
.rt {
    float: right;
}

/* 清除浮动 */
.clear {
    clear: both;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 页面容器 */
.wrapin {
    width: 1200px;
    margin: 0 auto;
}

/* Logo样式 */
.logo {
    display: block;
    width: 80px;
    margin: 5px 0;
    float: left;
    padding-right: 100px;
}

/* 头部样式 */
header {
    height: 80px;
    padding: 0 15px;
    background: #0F161F;
}

/* 导航菜单样式 */
.nav {
    float: left;
    line-height: 80px;
}
.nav li {
    display: inline-block;
    width: 80px;
    font-size: 18px;
    text-align: center;
}
.nav li a {
    color: #fff;
    transition: color 0.3s;
}
.nav li a:hover {
    color: #e74c3c;
}

/* 登录区域样式 */
.denglu {
    float: right;
    color: #fff;
    line-height: 80px;
}
.denglu a {
    color: #fff;
    font-size: 14px;
    margin: 0 5px;
    display: inline-block;
    transition: color 0.3s;
}
.denglu a:hover {
    color: #e74c3c;
}

/* 轮播图区域样式 */
.banner_con {
    margin: 20px 0;
    position: relative;
}

/* 轮播图主容器 */
.banner_box {
    width: 1200px;
    height: 410px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 轮播图项样式 */
.box-1 ul {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.5s ease;
}
.box-1 ul li {
    width: 33.333%;
    height: 100%;
    position: relative;
}
.box-1 ul li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-1 ul li h2 {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    background: rgba(125,125,120,.4);
    text-indent: 2em;
    padding-right: 500px;
    font-size: 15px;
    line-height: 40px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    color: ghostwhite;
}

/* 轮播图指示点样式 */
.box-2 {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}
.box-2 ul {
    display: flex;
}
.box-2 ul li {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s;
}
.box-2 ul li.on {
    background: #e74c3c;
}

/* 轮播图导航按钮 */
.box-3 span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.3);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: background 0.3s;
}
.box-3 span:hover {
    background: rgba(0,0,0,0.6);
}
.box-3 .prev {
    left: 20px;
}
.box-3 .next {
    right: 20px;
}

/* 轮播图右侧区域 */
.banner_rt {
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    height: 410px;
    background: #0F161F;
    padding: 10px;
}
.banner_rt h2 {
    padding-bottom: 5px;
    color: #fff;
    font-size: 18px;
}
.banner_rt li {
    margin: 8px 0;
    height: 110px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.banner_rt img {
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}
.banner_rt img:hover {
    transform: scale(1.1);
}

/* 内容区域 */
.con {
    margin-top: 20px;
    background: #222;
    padding: 15px;
    border-radius: 8px;
}

/* 标题样式 */
.title {
    color: #fff;
    border-bottom: 1px solid #666;
    margin: 15px 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}
.title h2 {
    font-weight: 600;
    font-size: 24px;
    border-bottom: none;
}
.title a {
    font-size: 14px;
    color: #ccc;
    transition: color 0.3s;
}
.title a:hover {
    color: #e74c3c;
}

/* 电影院样式 */
.about {
    display: flex;
    margin-bottom: 20px;
    padding: 20px;
    background: #333;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.about:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.about .text {
    flex: 1;
    padding-right: 20px;
    color: #fff;
}
.about .text p {
    margin-bottom: 20px;
    line-height: 1.6;
}
.about .pic {
    width: 300px;
}
.about .pic img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* 按钮样式 */
.btn, .btn2 {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-right: 15px;
    transition: all 0.3s;
}
.btn {
    background: #e74c3c;
    color: white;
}
.btn:hover {
    background: #c0392b;
}
.btn2 {
    background: #3498db;
    color: white;
}
.btn2:hover {
    background: #2980b9;
}

/* 电影列表样式 */
.game_list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin: 15px 0;
}
.game_list li {
    background: #333;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.game_list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.game_list .box {
    display: block;
    text-decoration: none;
}
.game_list .pic {
    height: 200px;
    overflow: hidden;
}
.game_list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.game_list li:hover img {
    transform: scale(1.05);
}
.game_list p {
    padding: 15px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin: 0;
}

/* 加入购物车按钮 */
.add-to-cart {
    display: block;
    background: #27ae60;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
    border: none;
    width: 100%;
    cursor: pointer;
}
.add-to-cart:hover {
    background: #219653;
}

/* 页脚样式 */
footer {
    text-align: center;
    padding: 20px;
    background: #0F161F;
    color: #fff;
    margin-top: 30px;
    border-radius: 8px;
}

/* 购物车图标 */
.cart-icon {
    position: relative;
    margin-left: 20px;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
}
.cart-count {
    position: absolute;
    top: -8px;
    right: -12px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 购物车弹窗样式 */
.cart-modal {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right 0.4s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
}
.cart-modal.active {
    right: 0;
}
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.cart-header h3 {
    font-size: 22px;
    color: #333;
}
.close-cart {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
}
.close-cart:hover {
    color: #e74c3c;
}
.cart-items {
    min-height: 300px;
}
.cart-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.cart-item img {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
}
.cart-item-details {
    flex: 1;
}
.cart-item-title {
    font-weight: bold;
    margin-bottom: 5px;
}
.cart-item-price {
    color: #e74c3c;
    font-weight: bold;
    margin-bottom: 10px;
}
.cart-item-quantity {
    display: flex;
    align-items: center;
}
.quantity-btn {
    width: 30px;
    height: 30px;
    background: #f1f1f1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.quantity-input {
    width: 40px;
    height: 30px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0 10px;
}
.remove-item {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
}
.cart-total {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    border-top: 2px solid #eee;
    margin-top: 20px;
}
.checkout-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background: #e74c3c;
    color: white;
    text-align: center;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}
.checkout-btn:hover {
    background: #c0392b;
}
.empty-cart {
    text-align: center;
    padding: 40px 0;
    color: #999;
}

/* 遮罩层 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}
.overlay.active {
    display: block;
}
</style>
</head>
<body>
<div class="wrapin">
  <header class="clearfix"> 
    <a href="#" class="logo"><img src="图片\video.png" alt="Logo"/></a>
    <ul class="clearfix nav">
      <li><a href="首页.html">首页</a></li>
      <li><a href="#movie-section">电影</a></li>
      <li><a href="#tv-section">电视剧</a></li>
      <li><a href="#cinema-section">电影院</a></li>
    </ul>
    <div class="denglu"> 
      <a href="登录.html" class="dl">登录</a>丨 
      <a href="注册.html" class="zc">注册</a>
      <!-- 购物车图标 -->
      <div class="cart-icon">
        <span>🛒</span>
        <span class="cart-count">0</span>
      </div>
    </div>
  </header>
</div>

<div class="wrapin">
  <div class="banner_con clearfix">
    <div class="banner_box">
     <div class="box-1">
  <ul>
    <li>
      <a href="我家茂.html" class="box">
          <img src="图片\csgo.jpg" style="width: 100%; height: auto;">
      </a>
    </li>
    <li>
      <a href="我家茂.html" class="box">
        <img src="图片\茂.jpg" style="width: 100%; height: auto;">
      </a>
    </li>
    <li>
      <a href="我家茂.html" class="box">
        <img src="图片\封面.png" style="width: 100%; height: auto;"> <!-- 高度自动等比例 -->
      </a>
    </li>
  </ul>
</div>
      <div class="box-2">
        <ul>
          <li class="on"></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="box-3"> 
        <span class="prev"> &lt; </span> 
        <span class="next"> &gt; </span> 
      </div>
    </div>
  </div>
  
  <div class="con" id="cinema-section">
    <div class="title">
      <h2>电影院</h2>
    </div>
   
    <div class="about clearfix">
      <div class="text">
        <p>万达电影股份有限公司（以下简称万达电影 股票代码：002739.SZ）隶属于万达集团。2005年，万达电影院线成立，2015年A股上市，2017年正式更名为万达电影。业务范围从产业链下游放映业务向上延伸至电影投资、制作和发行及相关衍生业务，全面覆盖电影产业链。截至2020年12月31日，万达电影在全球拥有影院1704家，银幕17118块；包含国内直营影城700家、6099块银幕。其中，拥有44家杜比影院和370块IMAX银幕，IMAX银幕数量全球领先。</p>
        <a href="万达电影.html" class="btn">详情查看</a> 
        <a href="订票.html" class="btn2">订票</a>
      </div>
      <div class="pic"><img src="wanda.jpg" alt="万达电影"/></div>
    </div>

    <div class="about clearfix">
      <div class="text">
        <p>太平洋电影城是四川省电影公司全资影城、属太平洋电影院线旗下影院，创立于1992年12月，距今已23年历史，累计票房收入2.3亿元，接待观众超过2千余万。影城成立以来先后投资三千余万元，经数次装修改造，使影城始终引领电影时尚潮流。地处最繁华的春熙路商圈核心位置，拥有18个豪华电影厅，观众座席数2000多座，是全国影厅最多、节目最多、场次最多、人次最多的影城。</p>
        <a href="dyy1.html" class="btn">详情查看</a> 
        <a href="订票1.html" class="btn2">订票</a>
      </div>
      <div class="pic"><img src="pacific.jpg" alt="太平洋影城"/></div>
    </div>
    
    <div class="about clearfix">
      <div class="text">
        <p>百老汇电影中心有4间影院，共640个座位，还有1间叫Kubrick的书店，售卖电影、书籍及提供咖啡店服务。该处是除了已结业的影艺戏院外，香港少数播放非主流电影的戏院。2009年11月，百老汇电影院(香港安乐影片有限公司)在北京开设了一家艺术影院——MOMA百老汇电影中心，这是北京第一座大型艺术影院。</p>
        <a href="dyy3.html" class="btn">详情查看</a>  
        <a href="订票2.html" class="btn2">订票</a>    
      </div>
      <div class="pic"><img src="broadway.jpg" alt="百老汇影城"/></div>
    </div>
  </div>
  
  <div class="con" id="movie-section">
    <div class="title">
      <h2>热门电影</h2>
      <a href="订票.html">查看更多</a> 
    </div>
    <ul class="game_list clearfix">
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="movie1.jpg" alt="和平精英大电影"/></div>
          <p>和平精英大电影</p>
        </a>
        <button class="add-to-cart" data-id="1" data-name="和平精英大电影" data-price="35">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="movie2.jpg" alt="无畏契约大电影"/></div>
          <p>无畏契约大电影</p>
        </a>
        <button class="add-to-cart" data-id="2" data-name="无畏契约大电影" data-price="40">加入购物车</button>
      </li>
      <li> 
        <a href="王者荣耀大电影.html" class="box">
          <div class="pic"><img src="movie3.jpg" alt="王者荣耀大电影"/></div>
          <p>王者荣耀大电影</p>
        </a>
        <button class="add-to-cart" data-id="3" data-name="王者荣耀大电影" data-price="45">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="movie4.jpg" alt="反恐精英大电影"/></div>
          <p>反恐精英大电影</p>
        </a>
        <button class="add-to-cart" data-id="4" data-name="反恐精英大电影" data-price="38">加入购物车</button>
      </li>
      <li> 
        <a href="一曲倾情.html" class="box">
          <div class="pic"><img src="movie5.jpg" alt="一曲倾情"/></div>
          <p>一曲倾情</p>
        </a>
        <button class="add-to-cart" data-id="5" data-name="一曲倾情" data-price="42">加入购物车</button>
      </li>
    </ul>
  </div>
  
  <div class="con" id="tv-section">
    <div class="title">
      <h2>热门电视剧</h2>
      <a href="订票.html">查看更多</a> 
    </div>
    <ul class="game_list clearfix">
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="tv1.jpg" alt="权力的游戏"/></div>
          <p>权力的游戏</p>
        </a>
        <button class="add-to-cart" data-id="6" data-name="权力的游戏" data-price="120">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="tv2.jpg" alt="西部世界"/></div>
          <p>西部世界</p>
        </a>
        <button class="add-to-cart" data-id="7" data-name="西部世界" data-price="110">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="tv3.jpg" alt="黑镜"/></div>
          <p>黑镜</p>
        </a>
        <button class="add-to-cart" data-id="8" data-name="黑镜" data-price="95">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="tv4.jpg" alt="怪奇物语"/></div>
          <p>怪奇物语</p>
        </a>
        <button class="add-to-cart" data-id="9" data-name="怪奇物语" data-price="105">加入购物车</button>
      </li>
      <li> 
        <a href="订票.html" class="box">
          <div class="pic"><img src="tv5.jpg" alt="纸牌屋"/></div>
          <p>纸牌屋</p>
        </a>
        <button class="add-to-cart" data-id="10" data-name="纸牌屋" data-price="100">加入购物车</button>
      </li>
    </ul>
  </div>
  
  <footer>电影购物平台 © 2023 版权所有</footer>
</div>

<!-- 购物车弹窗 -->
<div class="overlay"></div>
<div class="cart-modal">
  <div class="cart-header">
    <h3>我的购物车</h3>
    <button class="close-cart">×</button>
  </div>
  <div class="cart-items">
    <!-- 购物车商品将在这里动态生成 -->
    <div class="empty-cart">
      <p>🛒 购物车是空的</p>
      <p>快去添加喜欢的电影吧！</p>
    </div>
  </div>
  <div class="cart-total">
    <span>总计：</span>
    <span class="total-price">¥0.00</span>
  </div>
  <button class="checkout-btn">去结算</button>
</div>

<script>
// 购物车功能实现
document.addEventListener('DOMContentLoaded', function() {
  // 购物车数据
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  
  // DOM元素
  const cartIcon = document.querySelector('.cart-icon');
  const cartCount = document.querySelector('.cart-count');
  const cartModal = document.querySelector('.cart-modal');
  const closeCart = document.querySelector('.close-cart');
  const overlay = document.querySelector('.overlay');
  const cartItems = document.querySelector('.cart-items');
  const totalPrice = document.querySelector('.total-price');
  const checkoutBtn = document.querySelector('.checkout-btn');
  const addToCartButtons = document.querySelectorAll('.add-to-cart');
  
  // 更新购物车显示
  function updateCartDisplay() {
    // 更新购物车数量
    const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
    cartCount.textContent = totalItems;
    
    // 更新购物车内容
    if (cart.length === 0) {
      cartItems.innerHTML = `
        <div class="empty-cart">
          <p>🛒 购物车是空的</p>
          <p>快去添加喜欢的电影吧！</p>
        </div>
      `;
      totalPrice.textContent = '¥0.00';
      return;
    }
    
    cartItems.innerHTML = '';
    let total = 0;
    
    cart.forEach((item, index) => {
      const itemTotal = item.price * item.quantity;
      total += itemTotal;
      
      const cartItem = document.createElement('div');
      cartItem.className = 'cart-item';
      cartItem.innerHTML = `
        <img src="${item.image || 'https://via.placeholder.com/80x100?text='+item.name}" alt="${item.name}">
        <div class="cart-item-details">
          <div class="cart-item-title">${item.name}</div>
          <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
          <div class="cart-item-quantity">
            <button class="quantity-btn minus" data-index="${index}">-</button>
            <input type="text" class="quantity-input" value="${item.quantity}" readonly>
            <button class="quantity-btn plus" data-index="${index}">+</button>
          </div>
          <button class="remove-item" data-index="${index}">删除</button>
        </div>
      `;
      cartItems.appendChild(cartItem);
    });
    
    totalPrice.textContent = `¥${total.toFixed(2)}`;
    
    // 添加事件监听器
    document.querySelectorAll('.minus').forEach(button => {
      button.addEventListener('click', decreaseQuantity);
    });
    
    document.querySelectorAll('.plus').forEach(button => {
      button.addEventListener('click', increaseQuantity);
    });
    
    document.querySelectorAll('.remove-item').forEach(button => {
      button.addEventListener('click', removeItem);
    });
  }
  
  // 添加商品到购物车
  function addToCart(event) {
    event.preventDefault();
    
    const button = event.currentTarget;
    const id = button.dataset.id;
    const name = button.dataset.name;
    const price = parseFloat(button.dataset.price);
    const image = button.parentElement.querySelector('.pic img').src;
    
    // 检查商品是否已在购物车中
    const existingItemIndex = cart.findIndex(item => item.id === id);
    
    if (existingItemIndex !== -1) {
      // 商品已存在，增加数量
      cart[existingItemIndex].quantity++;
    } else {
      // 新商品，添加到购物车
      cart.push({
        id,
        name,
        price,
        quantity: 1,
        image
      });
    }
    
    // 保存到本地存储
    localStorage.setItem('cart', JSON.stringify(cart));
    
    // 更新显示
    updateCartDisplay();
    
    // 显示添加成功提示
    alert(`"${name}" 已添加到购物车！`);
  }
  
  // 减少商品数量
  function decreaseQuantity(event) {
    const index = event.currentTarget.dataset.index;
    
    if (cart[index].quantity > 1) {
      cart[index].quantity--;
    } else {
      // 如果数量为1，则删除商品
      cart.splice(index, 1);
    }
    
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartDisplay();
  }
  
  // 增加商品数量
  function increaseQuantity(event) {
    const index = event.currentTarget.dataset.index;
    cart[index].quantity++;
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartDisplay();
  }
  
  // 删除商品
  function removeItem(event) {
    const index = event.currentTarget.dataset.index;
    cart.splice(index, 1);
    localStorage.setItem('cart', JSON.stringify(cart));
    updateCartDisplay();
  }
  
  // 结算
  function checkout() {
    if (cart.length === 0) {
      alert('购物车是空的，请先添加商品！');
      return;
    }
    
    const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    alert(`结算成功！总金额：¥${total.toFixed(2)}`);
    
    // 清空购物车
    cart = [];
    localStorage.removeItem('cart');
    updateCartDisplay();
    
    // 关闭购物车
    cartModal.classList.remove('active');
    overlay.classList.remove('active');
  }
  
  // 事件监听器
  cartIcon.addEventListener('click', () => {
    cartModal.classList.add('active');
    overlay.classList.add('active');
  });
  
  closeCart.addEventListener('click', () => {
    cartModal.classList.remove('active');
    overlay.classList.remove('active');
  });
  
  overlay.addEventListener('click', () => {
    cartModal.classList.remove('active');
    overlay.classList.remove('active');
  });
  
  addToCartButtons.forEach(button => {
    button.addEventListener('click', addToCart);
  });
  
  checkoutBtn.addEventListener('click', checkout);
  
  // 初始化购物车显示
  updateCartDisplay();
});

// 轮播图功能
window.onload = function(){
    // 自定义$选择器函数
    function $(param){
        // 如果第二个参数为true，返回所有匹配元素
        if(arguments[1] == true){
            return document.querySelectorAll(param);
        }else{
            // 否则返回第一个匹配元素
            return document.querySelector(param);
        }
    }
    
    // 使用$函数选择元素
    var $box = $(".box");               // 主容器
    var $box1 = $(".box-1 ul li",true); // 所有幻灯片(节点列表)
    var $box2 = $(".box-2 ul");         // 导航点容器
    var $box3 = $(".box-3");            // 导航按钮容器
    var $length = $box1.length;         // 幻灯片数量
    
    // 创建导航点HTML字符串
    var str = "";
    for(var i =0;i<$length;i++){
        if(i==0){
            // 第一个导航点默认有'on'类
            str +="<li class='on'>"+(i+1)+"</li>";
        }else{
            str += "<li>"+(i+1)+"</li>";
        }
    }
    $box2.innerHTML = str; // 将导航点插入DOM
    
    var current = 0; // 当前幻灯片索引
    
    // 设置自动轮播定时器
    var timer;
    timer = setInterval(go,4000); // 每4秒切换一次
    
    // 切换到下一张幻灯片的主函数
    function go(){
        // 隐藏所有幻灯片并移除导航点激活状态
        for(var j =0;j<$length;j++){
            $box1[j].style.display = "none";
            $box2.children[j].className = "";
        }
        // 如果到达最后一张，回到第一张
        if($length == current){
            current = 0;
        }
        // 显示当前幻灯片并激活对应导航点
        $box1[current].style.display = "block";
        $box2.children[current].className = "on";
        current++; // 递增索引
    }
    
    // 鼠标悬停幻灯片时暂停自动轮播
    for(var k=0;k<$length;k++){
        $box1[k].onmouseover = function(){
            clearInterval(timer);
        }
        $box1[k].onmouseout = function(){
            timer = setInterval(go,4000);
        }
    }
    
    // 鼠标悬停导航按钮时暂停自动轮播
    for(var p=0;p<$box3.children.length;p++){
        $box3.children[p].onmouseover = function(){
            clearInterval(timer);
        };
        $box3.children[p].onmouseout = function(){
            timer = setInterval(go,4000);
        }
    }
    
    // 导航点功能实现
    for(var u =0;u<$length;u++){
        // 在每个导航点上存储索引
        $box2.children[u].index = u;
        $box2.children[u].onmouseover = function(){
            clearInterval(timer);
            // 隐藏所有幻灯片和导航点
            for(var j=0;j<$length;j++){
                $box1[j].style.display = "none";
                $box2.children[j].className = "";
            }
            // 激活点击的导航点和对应幻灯片
            this.className = "on";
            $box1[this.index].style.display = "block";
            current = this.index +1; // 设置下一张索引
        }
        $box2.children[u].onmouseout = function(){
            timer = setInterval(go,2000); // 恢复自动轮播(注意：这里使用了2秒间隔)
        }
    }
    
    // 上一张按钮点击事件
    $box3.children[0].onclick = function(){
        back();
    }
    // 下一张按钮点击事件
    $box3.children[1].onclick = function(){
        go();
    }
    
    // 切换到上一张幻灯片的函数
    function back(){
        // 隐藏所有幻灯片和导航点
        for(var j =0;j<$length;j++){
            $box1[j].style.display = "none";
            $box2.children[j].className = "";
        }
        // 如果在第一张，则跳到最后一张
        if(current == 0){
            current = $length;
        }
        // 显示上一张幻灯片并激活对应导航点
        $box1[current-1].style.display = "block";
        $box2.children[current-1].className = "on";
        current--; // 递减索引
    }
        
}
</script>
</body>
</html>